<!-- 商品导航栏 -->
<div id="cardArea">
    <div class="card box newbox shadow-sm" v-bind:class="[item.OnSale? '':'offShelf']" v-for='item in itemSet' v-bind:data-item-id='item.ItemID'
        onclick="loadItemModal(this.getAttribute('data-item-id'))" data-toggle="modal" data-target="#itemModal"
        style="cursor:pointer;">
        <!-- 如果是移动端 -->
        <div v-if='mobilePhoneMode' id="mobilePhoneCard" class="row no-gutter pl-2 h-100">
            <div class="cardImgArea col-5" v-bind:data-aspect-ratio="item.CoverFileHWRatio">
                <img class="img-rounded" v-bind:class="[item.CoverFileHWRatio>=1? 'w-100' : 'h-100']"
                v-bind:src="item.CoverFileUrl" onerror='$(this).css("display", "none")'>
            </div>
            <div class="card-body col-7 pl-2">
                <div>
                    <p class="font-weight-bold text-muted"><span class="text-danger" v-if='!item.OnSale'>[已下架]</span>{{item.ItemName}}</p>
                </div>
                <div class="row ml-0">
                    <h5 class="font-weight-normal">￥{{item.ItemPrice}}</h5>
                    <small class="card-sublitle ml-2 mt-1">
                        <span v-if='item.DeliverByPost'
                            class="badge  bg-white text-secondary border border-secondary font-weight-light">邮寄</span>
                        <span v-if='item.DeliverByFace'
                            class="badge  bg-white text-success border border-success font-weight-light">面交</span>
                        <span v-if='item.DeliverNoNeed'
                            class="badge  bg-white text-info border border-info font-weight-light">免送</span>
                    </small>
                </div>
            </div>
        </div>
        <!-- 如果是PC端 -->
        <div v-else >
            <div id="pcCard" class="col-12">
                <div class="cardImgArea" v-if='item.OnSale' v-bind:data-aspect-ratio="item.CoverFileHWRatio" style="width: 100%;">
                    <img class="card-img-top" v-bind:src="item.CoverFileUrl" onerror='$(this).css("display", "none")'>
                </div>
                <div class="card-body">
                    <h5 class="card-title"><span class="text-danger" v-if='!item.OnSale'>[已下架]</span>{{item.ItemName}}</h5>
                    <h5 class="card-subtitle">￥{{item.ItemPrice}}</h5>
                    <p class="card-text itemDescriptionArea">{{item.ItemDescription}}</p>
                    <h5 class="card-sublitle">
                        <span v-if='item.DeliverByPost' class="badge badge-primary">邮寄</span>
                        <span v-if='item.DeliverByFace' class="badge badge-success">当面交易</span>
                        <span v-if='item.DeliverNoNeed' class="badge badge-success">无需运送</span>
                    </h5>
                </div>
            </div>
        </div>
    </div>
</div>



<script>
    function loadSrc(){
        cfn = $(this).attr('data-cover-file-name')
        this.attr('src', `https://xib-item-cover.oss-cn-beijing.aliyuncs.com/${cfn}?x-oss-process=style/webp_compress`)
    }
</script>